<template>
  <div style="padding: 12px;">
    <div>
      <div class="divide-title">单滑块时间轴</div>
      <timeline-slider :currentTime="currentTime" :before="2" :after="1" :period="8" @input="onTimelineSliderInput1"></timeline-slider>
    </div>

    <div style="margin-top: 36px;">
      <div class="divide-title">双滑块时间轴</div>
<!--      <timeline-slider-v2 :currentTime="currentTime" @input="onTimelineSliderInput2" @change="onTimelineSliderChange2"></timeline-slider-v2>-->
      <timeline-slider-v2 :currentTime="currentTime" :date-range="dateRange" range @input="onTimelineSliderInput2" @change="onTimelineSliderChange2"></timeline-slider-v2>
    </div>

    <div style="margin-top: 36px;">
      <div class="divide-title">时间范围播放器</div>
      <el-date-picker
        style="margin-bottom: 12px;"
        v-model="dateRange"
        type="datetimerange"
        range-separator="至"
        value-format="yyyy-MM-dd HH:mm"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      ></el-date-picker>
      <el-button style="margin-left: 12px;" type="primary" @click="onClick">确定</el-button>
      <player-bar :time-range="timeRange" :step="10" :speed="3" @change="onPlayerBarChange" @close="onPlayerBarClose"></player-bar>
    </div>
  </div>
</template>

<script>
import moment from 'moment';
import timelineSlider from '@/components/timeline-slider';
import timelineSliderV2 from '@/components/timeline-slider-v2';
import playerBar from '@/components/player-bar';

export default {
  components: {
    timelineSlider,
    timelineSliderV2,
    playerBar,
  },
  data() {
    const dateRange = [moment('2022-07-10 14:00:00').format('YYYY-MM-DD HH:mm'), moment('2022-07-10 20:00:00').format('YYYY-MM-DD HH:mm')];

    return {
      currentTime: moment().format('YYYY-MM-DD HH:mm'),
      timer: null,
      dateRange,
      playing2: false,
      timeRange: [],
    };
  },
  mounted() {
    this.timer = setInterval(() => {
      this.currentTime = moment().format('YYYY-MM-DD HH:mm');
    }, 1000);
  },
  beforeDestroy() {
    this.clearTimer();
  },
  methods: {
    onTimelineSliderInput1(timeRange) {
      console.log('timeline slider input 1 => ', timeRange);
    },

    /**
     * 双滑块时间轴 - 播放时间轴实时变化监听回调函数
     * @param timeRange
     */
    onTimelineSliderInput2(timeRange) {
      console.log('timeline slider input 2 => ', timeRange);
    },

    /**
     * 双滑块时间轴 - 拖动时间滑块监听回调函数
     * @param timeRange
     */
    onTimelineSliderChange2(timeRange) {
      console.log('timeline slider change 2 => ', timeRange);
    },

    clearTimer() {
      clearInterval(this.timer);
      this.timer = null;
    },

    onClick() {
      if (this.dateRange) {
        this.timeRange = JSON.parse(JSON.stringify(this.dateRange));
      }
    },

    onPlayerBarChange(dateObj) {
      console.log('player-bar change => ', dateObj);
    },

    onPlayerBarClose() {
      console.log('close => ');
    },
  },
};
</script>

<style lang="scss" scoped>

</style>
